<template>
    <div class="container" style="height:60vh; width:80vw">
        <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
    </div>
    <t-button @click="updateData">updateData</t-button>
</template>

<script setup>
import { ref } from 'vue'
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import { useIntervalFn } from '@vueuse/core'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

const chartData =ref({
                labels: ['January', 'February', 'March', 'April', 'May'],
                datasets: [
                    {
                        label: '同比增长',
                        backgroundColor: '#f87979',
                        data: [40, 45, 50, 60, 55]
                    },
                    {
                        label: '环比增长',
                        backgroundColor: '#7989f8',
                        data: [25, 35, 40, 45, 50]
                    }
                ]}
)

const  chartOptions = ref({
        responsive: true,
        maintainAspectRatio: false
})

//更新图表数据
const updateData = () => {
    chartData.value = {
                labels: ['January', 'February', 'March', 'April', 'May'],
                datasets: [
                    {
                        label: '同比增长',
                        backgroundColor: '#f87979',
                        data: [Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100]
                    },
                    {
                        label: '环比增长',
                        backgroundColor: '#7989f8',
                        data: [Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100]
                    }
                ]
    }

}


//采用usecore 动态调用函数定时器 useIntervalFn() 实现动态更新
useIntervalFn(() => {
  updateData()
}, 1000)

    // export default {
    //     name: 'BarChart',
    //     components: { Bar },
    // data() {
    //     return {
    //         chartData: {
    //             labels: ['January', 'February', 'March', 'April', 'May'],
    //             datasets: [
    //                 {
    //                     label: '同比增长',
    //                     backgroundColor: '#f87979',
    //                     data: [40, 45, 50, 60, 55]
    //                 },
    //                 {
    //                     label: '环比增长',
    //                     backgroundColor: '#7989f8',
    //                     data: [25, 35, 40, 45, 50]
    //                 }
    //             ]
    //         },
    //         chartOptions: {
    //             responsive: true,
    //             maintainAspectRatio: false
    //         }
    //     }
    // },

    // methods: {
    //     updateData: function () {
    //         console.log(" update ");
    //     }
    // },
    
    // computed: {
    //       chartData() { 
    //             return {
    //             labels: ['January', 'February', 'March', 'April', 'May'],
    //             datasets: [
    //                 {
    //                     label: '同比增长',
    //                     backgroundColor: '#f87979',
    //                     data: [11, 22, 33, 44, 55]
    //                 },
    //                 {
    //                     label: '环比增长',
    //                     backgroundColor: '#7989f8',
    //                     data: [55, 44, 33, 22, 11]
    //                 }
    //             ]
    //         }  
    //     },
          
    //     chartOptions() { return /* mutable chart options */ }
    //     }
    // }
</script>
